
import PropTypes from "prop-types"
import { useState } from "react"
import "@/assets/style.scss"

function Button(props) {
  let { type, children, onClick } = props;
  return (
    <div className="ml-button">
      <span className={type} onClick={onClick}>{children}</span>
    </div>
  )
}

Button.propTypes = {
  type: PropTypes.oneOf(['default', 'primary', 'danger', 'info']),
  children: PropTypes.node,
  onClick: PropTypes.func
}

Button.defaultProps = {
  type: "default",
  children: '按钮',
  onClick: () => { }
}

function Modal(props) {
  let { title, closable, children, type, visiable, onCancel, onOk, footer } = props;
  let renderFooter = () => {
    let btns = [];
    switch (type) {
      case "confirm":
        btns = [
          <Button type="primary" key="1" onClick={onOk}>确定</Button>,
          <Button key="2" onClick={onCancel}>取消</Button>
        ]
        break;
      case "danger":
        btns = [
          <Button type="danger" key="1" onClick={onOk}>删除</Button>,
          <Button key="2" onClick={onCancel}>取消</Button>
        ]
        break;
      case "info":
        btns = [
          <Button type="info" key="1" onClick={onCancel}>我知道了</Button>
        ]
        break;
    }
    return btns;
  }
  let handerLayer = e => {
    // console.log("点击了遮罩层~");
    // console.log(e.target.dataset.self);  // 表示你实打实点击的那个元素

    if (e.target.dataset.self) {
      onCancel()
    }

  }
  // data-self="layer" 表示h5中的自定义属性
  return (
    <div data-self="layer" onClick={handerLayer} className="ml-layer" style={{ display: visiable ? 'block' : 'none' }}>
      <div className="ml-modal">
        <header>
          <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closable && "X"}</div>
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          {footer ? footer() : renderFooter()}
        </footer>
      </div>
    </div>
  )
}

Modal.propTypes = {
  title: PropTypes.node,
  closable: PropTypes.bool,
  children: PropTypes.node,
  type: PropTypes.oneOf(["confirm", "danger", "info"]),
  visiable: PropTypes.bool,
  onCancel: PropTypes.func,
  onOk: PropTypes.func,
  footer: PropTypes.func,
}

Modal.defaultProps = {
  title: "默认小标题",
  closable: true,
  children: <div>主体内容的默认值</div>,
  type: "info",
  visiable: false,
  onCancel: () => { },
  onOk: () => { },
  footer: () => { },
}

function DemoA() {
  let [visiable, setVisiable] = useState(false)
  let submit = () => {
    setTimeout(() => {
      console.log("submit...,发送ajax请求");
      setVisiable(false)
    }, 200)
  }
  return (
    <div>
      <button onClick={() => setVisiable(true)}>open modal</button>
      <Modal
        onCancel={() => setVisiable(false)}
        onOk={submit}
        visiable={visiable}
        type="confirm"
        closable
        title={<span style={{ color: "red" }}>删除用户</span>}
        footer={
          () => {
            return [
              <Button type="danger" key="11">残忍离开</Button>,
              <Button type="primary" key="22">确定</Button>
            ]
          }
        }
      >
        <div>
          <input type="text" />
          <div>你确定要添加此用户吗?</div>
        </div>
      </Modal>
    </div>
  )
}

export default DemoA;